<!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>关于我们</title>
  <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
  <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
  <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
  <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
  <link rel="stylesheet" type="text/css" href="../../css/style.css" />
  </head>
  <style>
      #app{
        width: 100%;
        background: #f2f2f5;
      }
      html{
        background: #f2f2f5;
      }
      .box{
        width: 80.4%;
        margin: 0 auto;
        margin-top: 4.25rem;
        height: 1.85rem;
      }
      .box .tel{
        height: 1.85rem;
        margin:0 auto;
        border-bottom: 0.03rem solid #cecece;
        display: flex;
      }
      .box .tel img{
        width: 0.65rem;
        height: 0.7rem;
      }
      .box .tel input{
        height: 0.8rem;
        margin-left: 0.3rem;
        color: #0a87ff;
        text-shadow: 0px 0px 0px #000;
        -webkit-text-fill-color: #666;
      }
      input::-webkit-input-placeholder {
        /* placeholder颜色  */
        color: #b2b2b2;
        /* placeholder字体大小 */
        font-size: 0.7rem;
        /* placeholder字间距  */
        letter-spacing: 0rem;
      }
      .btn{
        width: 80%;
        height: 2.3rem;
        background-color: #cecece;
        background-image: #cecece;
        border-radius: 0.25rem;
        font-size: 0.85rem;
        color: #fff;
        letter-spacing: 0.05rem;
        margin: 0 auto;
        margin-top: 3.45rem;
        line-height: 2.3rem;
        text-align: center;
      }
  </style>
  <body>
  <div id="app">
      <div class="box">
          <div class="tel" ref="ref_tel">
            <img src="../../image/phone.png" alt="">
            <input type="tel" placeholder="请输入新的手机号" v-model="mobile" ref="refcode" @input="vaitail" maxlength="11" >
          </div>
      </div>
      <div class="btn" ref="ref_next" @click="next('change_phone','myself/change_phone','手机号')">下一步</div>
  </div>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/zepto.js"></script>
  <script type="text/javascript" src="../../script/vue.min.js"></script>
  <script type="text/javascript" src="../../script/aui-tab.js"></script>
  <script type="text/javascript" src="../../script/aui-scroll.js"></script>
  <script type="text/javascript" src="../../script/aui-slide.js"></script>
  <script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
  <script type="text/javascript">
      apiready = function(){

      };
      new Vue({
        el:"#app",
        data:{
            mobile:''
        },
        methods:{
          vaitail:function(){
            // 判断正则表达式
            var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
            if(!myreg.test(this.mobile)){

            }
            //  当输入的时候，下边框颜色变化
            var phone_number = this.$refs.refcode.value.length;
            if(phone_number>0){
              this.$refs.ref_tel.style.borderBottom= "0.1rem solid #0a87ff";
            }
            // 当输入完成时候，下一步颜色变化
            if(phone_number>10){
              console.log(this.$refs.ref_next.style)
              this.$refs.ref_next.style.backgroundImage="linear-gradient(90deg, #3290c6 0%, #1e8ce3 0%, #0a87ff 0%, #5fc2b8 100% ),linear-gradient(	#cecece,	#cecece	)";
              // 当输入完成的时候，下边框颜色变化
              this.$refs.ref_tel.style.borderBottom= "0.1rem solid #cecece";
            }
            // console.log(this.$refs.refcode.value.length)
          },
          next:function(name,page,type){
            api.openWin({
                name: name,
                url: '../header/user_header.html',
                pageParam: {
                  name: page,
                  type:type
                }
            });
          }
        }
      })
  </script>
  </html>
